<!--固定栏目详情-->
<template>
  <section class="page">
    <headerbar>
      {{title}}
      <!--<span @click="showShareDialog" class="head-btn-text" slot="btn">分享</span>-->
    </headerbar>

    <section class="bg-white" v-if="preData.createTime">
      <section class="detail">
        <h1 class="title">{{preData.title}}</h1>
        <p class="date">来源：{{preData.source || '未知'}} <span class="float-right">时间：{{preData.createTime}}</span></p>
        <p class="color-red pdh-2 pdv-1 shortTitle">{{preData.shortTitle}}</p>
        <p class="line"></p>
        <div class="cont-text" v-if="detail.newsContentExt" v-html="detail.newsContentExt.contents">
        </div>

        <fileDownloadComponent :files="detail.files"></fileDownloadComponent>

        <p class="pdv-2"></p>
        <viewsUpsComponent v-if="detail.newsContent"></viewsUpsComponent>

      </section>
    </section>



    <section class="d-scroll-2head bg-white " :class="[{'d-scroll-3head': isInputFocus}]">
      <!--<div class="water-logo" v-if="preData.comments < 1">
        <img src="../../../../static/images/dangjian/home/logo.png" alt="">
      </div>-->

      <commentListComponent v-if="detail.newsContent" :_contentId="detail.newsContent.id" :shareType="0" @onInputFocus="onInputFocus"></commentListComponent>
    </section>

    <!--<liveMsgComponent v-if="preData.id" :detail="preData" :contentId="preData.id" :comments="preData.comments"></liveMsgComponent>-->

  </section>
</template>

<script>
  import fileDownloadComponent from '@/components/common/fileDownloadComponent.vue'
  import commentListComponent from '@/components/common/commentListComponent'
  import viewsUpsComponent from '@/components/common/viewsUpsComponent'
  export default {
    components: {viewsUpsComponent, commentListComponent, fileDownloadComponent},
    name: 'redCloudNewsDetail',
    data () {
      return {
        preData: {},
        detail: {},
        shareDialogInstance: null,
        title: '',
        isInputFocus: false,
      }
    },
    created () {
      this.$store.state.flagType = 1
      if (this.$route.query.channelName) {
        this.title = this.$route.query.channelName
      }
      this.loadData()
      this.like(this.$route.query.channelId)
    },
    methods: {
      onInputFocus(blo) {
        this.isInputFocus = blo;
      },
      loadData () {
        let type = this.$route.query.type
        this.fetchService.contentCarousel(type).then(res => {
          if (res.code === 0) {
            this.detail = res.data
            this.$store.state.newsDetail = this.detail.newsContent
            this.$store.state.newsDetail.detail = this.detail
            this.preData = this.detail.newsContent
            if (this.detail.newsContentExt) {
              this.historyAdd()
            }
          } else {
            this.tools.tip(res.message)
          }
        })
      },
    // 添加到我的足迹
      historyAdd () {
        let data = {
          contentId: this.detail.newsContentExt.contentId,
          newsType: 0,  // 新闻类型(0图文;1长视频;2音频;3短视频)
        }
        this.fetchService.historyAdd(data).then((res) => {
        })
      },
      like (id) {
        let params = {
          contentId: id,
          type: 1
        }
        this.fetchService.updateCount(params).then(res => {
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/common/stylus/moon.scss";
</style>
